<template>
	<input type="number" :float="float" :placeholder="placeholder" :class="[customClass]" :placeholder-class="[customPlaceClass]" :value="modelValue" @input="handleInput" />
</template>

<script setup>
	import { ref, computed, watch, nextTick, defineProps, defineEmits } from 'vue';
	import { hint } from '/service/port';

	const props = defineProps({
		modelValue: {
			type: String,
			default: ''
		},
		placeholder: {
			type: String,
			default: '请填写'
		},
		customClass: {
			type: String,
			default: ''
		},
		customPlaceClass: {
			type: String,
			default: ''
		},
		float: {
			type: Boolean,
			default: false
		}
	});

	const emit = defineEmits(['update:modelValue']);

	const isFloat = (value) => {
		const num = Number(value);
		return !isNaN(num) && !Number.isInteger(num);
	};

	const handleInput = (e) => {
		let value = e.detail.value;

		if (value < 0) {
			nextTick(() => {
				emit('update:modelValue', 6666);
				hint('6666！请不要输入负数哦~');
			});
			return;
		}

		if (isFloat(value) && !props.float) {
			nextTick(() => {
				emit('update:modelValue', '');
				hint('请输入正整数');
			});

			return;
		}

		emit('update:modelValue', value);
	};
</script>
<style>
	.inp {
		color: #000 !important;;
	}
	.place-inp {
		color: #bdbdbd;
	}
</style>